<template>
  <div class="app-container calendar-list-container">
    <avue-crud
      ref="crud"
      :option="tableManageOption"
      :data="listManage"
      v-model="formManage"
      :table-loading="listManageLoading"
      @on-load="getManagelist"
      @refresh-change="refreshChange"
    >
      <template slot="menuLeft">
        <el-form :model="addForm" ref="addRef" label-width="60px" :inline="true" size="small">
          <el-form-item label="名称">
            <el-input v-model="addForm.Name" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              v-if="menuPermissions_btn_add"
              type="primary"
              icon="el-icon-plus"
              @click="handleManageCreate"
            >添加</el-button>
          </el-form-item>
        </el-form>
        <!-- <el-button
        
          class="filter-item"
          type="primary"
          icon="el-icon-plus"
          @click="handleManageCreate"
        >添加</el-button>-->
      </template>

      <template slot="menu" slot-scope="scope">
        <el-button
          v-if="menuPermissions_btn_del"
          type="text"
          size="small"
          icon="el-icon-delete"
          @click="handleManageDelete(scope.row, scope.index)"
        >删除</el-button>
      </template>
    </avue-crud>
  </div>
</template>

<script>
import {
  getValueSizeList,
  addValueSize,
  deleteValueSize,
} from "@/api/platProduct/size";
import { tableManageOption } from "@/const/crud/platProduct/product-sizemanage";
export default {
  name: "manage-form",
  data() {
    return {
      //管理子项
      tableManageOption: tableManageOption,
      listManage: [],
      listManageLoading: false,
      formManage: {},
      addManageVisible: false,
      // addManageForm: {
      //   GoodsSepcId: "",
      //   Name: "",
      //   ShopId: "",
      // },
      menuPermissions_btn_add: true,
      menuPermissions_btn_del: true,
      addForm: {
        Name: "",
      },
    };
  },
  watch: {
    Id(newValue, oldValue) {
      if (newValue) {
        this.listManage = [];
        this.getManagelist();
      }
    },
  },
  props: {
    Id: {
      type: String,
      default: "",
      required: true,
    },
  },
  methods: {
    getManagelist() {
      let param = {
        Id: this.Id,
      };
      this.listManageLoading = true;
      getValueSizeList(param)
        .then((res) => {
          if (res.status == 200) {
            if (res.data.code == 0) {
              this.listManage = res.data.data;
              this.listManageLoading = false;
            }
          }
        })
        .catch((error) => {
          console.log(error);
          this.listManageLoading = false;
        });
    },
    handleManageCreate() {
      let params = {
        GoodsSepcId: this.Id,
        Name: this.addForm.Name,
        ShopId: "", //是空的时后台直接赋0
      };
      addValueSize(params).then((res) => {
        if (res.status == 200) {
          if (res.data.code == 0) {
            this.getManagelist();
            (this.addForm = {}), this.$message.success(res.data.msg);
          }
        }
      }).catch(error=>{
        console.log(error);
      });
    },
    handleManageDelete(row, index) {
      this.$confirm(
        '是否确认删除名称为"' + row.Name + '"' + '"的数据项?',
        "警告",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(function () {
          let param = {
            Id: row.Id,
          };
          return deleteValueSize(param); //返回删除的方法
        })
        .then(() => {
          this.getManagelist();
          this.$message.success("删除成功");
          // this.$notify.success("删除成功");
        });
    },
    refreshChange() {
      this.getManagelist();
    },
  },
  created() {},
  mounted() {},
};
</script>

<style lang="scss" scoped>
</style>